<template>
  <div>
    <!-- <div class="bg-white grid-content">
      <el-form :inline="true" class="demo-form-inline">
        <el-date-picker
          style="top: 15px"
          v-model="searchDate"
          type="month"
          value-format="yyyy-MM"
          placeholder="选择月"
          align="right"
          unlink-panels>
        </el-date-picker>
          <el-form-item>
            <el-button type="primary" @click="formSearch()">查询</el-button>
            <el-button type="success" @click="download()">下载</el-button>
          </el-form-item>
      </el-form>
    </div> -->
    <div class="bg-white grid-content">
      <div style="overflow: hidden">
        <div class="mytitle">生产运行日报</div>
      </div>
      <!-- 表格 -->
      <el-table
        :data="tableData"
        :header-cell-style="{ background: '#F5F7FA', color: '#909399' }"
        border
        stripe
      >
        <el-table-column
          type="index"
          label="序号"
          :index="indexMethod"
        >
        </el-table-column>
        <el-table-column
          align="center"
          fixed="left"
          prop="date"
          label="日期"
          width="100px"
        >
        </el-table-column>
        <el-table-column prop="zj" label="第一采油作业区" align="center">
          <el-table-column
            prop="yqjg"
            label="一区机关"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="dsebz"
            label="东12班组"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="ssebz"
            label="尚12班组"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="hj1"
            label="合计"
            align="center"
          >
          </el-table-column>
        </el-table-column>
        <el-table-column prop="tc" label="第二作业区" align="center">
          <el-table-column
            prop="dssbz"
            label="东14班组"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="dslbz"
            label="东16班组"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="dsbbz"
            label="东18班组"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="hj2"
            label="合计"
            align="center"
          >
          </el-table-column>
        </el-table-column>
        <el-table-column prop="bk" label="第三采油作业区" align="center">
          <el-table-column
            prop="sqjg"
            label="三区机关"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="sbbz"
            label="树8班组"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="sslbz"
            label="树16班组"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="s101bz"
            label="树101班组"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="hj3"
            label="合计"
            align="center"
          >
          </el-table-column>
        </el-table-column>
        <el-table-column prop="bk" label="第四作业区"  align="center">
          <el-table-column
            prop="s127bz"
            label="树127班组"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="x6bz"
            label="徐6班组"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="yelbz"
            label="榆二联班组"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="hj4"
            label="合计"
            align="center"
          >
          </el-table-column>
        </el-table-column>
        <el-table-column prop="bk" label="肇州分公司"  align="center">
          <el-table-column
            prop="z25bz"
            label="肇25班组"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="seebz"
            label="升22班组"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="hj5"
            label="合计"
            align="center"
          >
          </el-table-column>
        </el-table-column>
        <el-table-column prop="bk" label="生产保障大队" align="center">
          <el-table-column
            prop="hqbz"
            label="后勤班组"
            align="center"
          >
          </el-table-column>
        </el-table-column>
        <el-table-column
          prop="shyszl"
          label="生活用水总量"
          align="center"
        >
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import scyxrbApi from "@/api/scyxrb";
import moment from "moment";

export default {
  data() {
    return {
      show: false, //隐藏序列
      pageNo: 1, //当前页码
      pageSize: 10, //每页显示数量
      total: 0, //总数量
      currentPage: 1, //当前页码
      //时间快捷选择
      pickerOptions: {
        // disabledDate(time) {
        //   return time.getTime() > Date.now();
        // },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      searchDate: null,
      // 表格数据
      tableData: [],
      approveStatus: "",
    };
  },
  mounted() {
    const now = new Date();
    const year = now.getFullYear(); // 年
    const month = now.getMonth() + 1; // 月
    this.search(year, month);
  },
  methods: {
    /**
     * 查询列表
     */
    async search(year,month) {
      let res = await scyxrbApi.getShysyl(
        year,
        month
      );
      this.tableData=res.data
    },
    //条件查询
    formSearch() {
      var listrq=this.searchDate.split('-')
      var year=parseInt(listrq[0])
      var month=parseInt(listrq[1])
      this.search(year,month)
    },
    //下载
    download() {
      import("@/vendor/Export2Excel").then((excel) => {
        const multiHeader = [
          [
            "生产运行日报",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
          ],
          [
            "日期",
            "",
            "钻井",
            "",
            "",
            "投产",
            "",
            "老井补孔",
            "",
            "油水井常规压裂",
            "",
            "缝网压裂",
            "",
            "注水",
            "",
            "",
            "",
            "采油",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
          ], //第一行31
          [
            "",
            "",
            "计划（口）",
            "完钻（口）",
            "钻机（台）",
            "计划（口）",
            "完成（口）",
            "计划（口）",
            "完成（口）",
            "计划（口）",
            "完成（口）",
            "计划（口）",
            "完成（口）",
            "阶段测调（综合调整方案）",
            "",
            "重配",
            "",
            "检泵井",
            "",
            "积压井",
            "",
            "测压井",
            "",
            "措施井",
            "",
            "",
            "",
            "",
            "",
            "合计影响",
            "",
          ], //第二行31
          [
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "计划（口）",
            "完成（口）",
            "井数（口）",
            "日影响（立方米）",
            "井数（口）",
            "日影响（吨）",
            "井数（口）",
            "日影响（吨）",
            "井数（口）",
            "日影响（吨）",
            "压裂",
            "",
            "邻井封井/套管调查",
            "",
            "措施配合",
            "",
            "井数（口）",
            "日影响（吨）",
          ], //第三行
        ]; // 前三行的表头数据，二维数组，不够的用空白补全
        const header = [
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "井数（口）",
          "日影响（吨）",
          "井数（口）",
          "日影响（吨）",
          "井数（口）",
          "日影响（吨）",
          "",
          "",
        ]; // 最后一行的表头数据
        const filterVal = [
          "rq",
          "bz",
          "zjJh",
          "zjWc",
          "zjZj",
          "tcJh",
          "tcWc",
          "bkJh",
          "bkWc",
          "ylJh",
          "ylWc",
          "fwJh",
          "fwWc",
          "ctJh",
          "ctWc",
          "cpJh",
          "cpWc",
          "jbjJs",
          "jbjYx",
          "jyjJs",
          "jyjYx",
          "cyjJs",
          "cyjYx",
          "ylJs",
          "ylYx",
          "tgJs",
          "tgYx",
          "csphJs",
          "csphYx",
          "hjyxJs",
          "hjyxYx",
        ];
        const list = this.tableData;
        const data = this.formatJson(filterVal, list);
        const merges = [
          "A1:AE1",
          "A2:A5",
          "B2:B5",
          "C2:E2",
          "F2:G2",
          "H2:I2",
          "J2:K2",
          "L2:M2",
          "N2:Q2",
          "R2:AE2",
          "N3:O3",
          "P3:Q3",
          "R3:S3",
          "T3:U3",
          "V3:W3",
          "X3:AC3",
          "AD3:AE3",
          "C3:C5",
          "D3:D5",
          "E3:E5",
          "F3:F5",
          "G3:G5",
          "H3:H5",
          "I3:I5",
          "J3:J5",
          "K5:K5",
          "L5:L5",
          "M3:M5",
          "N4:N5",
          "O4:O5",
          "P4:P5",
          "Q4:Q5",
          "R4:R5",
          "S4:S5",
          "T4:T5",
          "U4:U5",
          "V4:V5",
          "W4:W5",
          "AD4:AD5",
          "AE4:AE5",
          "X4:Y4",
          "Z4:AA4",
          "AB4:AC4",
        ]; // 合并单元格的数据，如何合并参考上面图片的蓝色背景部分
        excel.export_json_to_excel({
          multiHeader,
          header,
          filename: "生产运行日报",
          autoWidth: true,
          merges,
          data,
        });
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          return v[j];
        })
      );
    },
    /*** 当每页数量发生变化时触发该事件 */
    handleSizeChange(size) {
      console.log(size);
      this.pageSize = size;
      //将每页显示的数量交给成员变量
      this.search(this.pageNo, size);
    },
    /*** 当页码发生变化时触发该事件 */
    handleCurrentChange(page) {
      console.log(page);
      this.pageNo = page;
      //调用查询方法
      this.search(page, this.pageSize);
    },
    // 序号计算
    indexMethod(index) {
      // index默认在0开始，这里+1
      return index + 1 + (this.pageNo - 1) * this.pageSize;
    },
  },
};
</script>


<style lang="scss" scoped>
// 标题
.mytitle {
  font-size: larger;
  padding-left: 45%;
  margin-bottom: 16px;
  float: left;
}

//按钮组
.myTime {
  float: right;
}

//格子的样式
.bg-white {
  background: #ffffff;
}

.grid-content {
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 4px;
}

.calendar ::v-deep .el-button-group::before {
  display: none;
}

.calendar ::v-deep .el-button-group::after {
  display: none;
}

// 分割线样式
.el-divider--horizontal {
  display: block;
  height: 2px;
  width: 100%;
  margin: 24px 0;
}

// 表单各项的样式
.el-form-item {
  margin: 15px 10px 15px 10px;
}
</style>
